<template>
	<view>
		<u-navbar :title="$t('my.add_wallet_address')" placeholder bgColor="#0fbc96" leftIconColor="#FFFFFF"
			titleStyle="color: #FFFFFF" autoBack>
		</u-navbar>
		<view class="content">
			<view class="cardslist" v-for="(item,index) in walletList" :key="item.id" @click="handChoiceCard(index)"
				:class="{'active': content === index}">
				<view class="item-list flex flex-direction">
					<text class="font-30">USDT-TRC20</text>
					<text class="font-30 color_009ad6">xxxxxxx</text>
					<text class="font-30">king</text>
				</view>
				<up-icon @click="handWalletDel(item)" name="trash" color="rgb(238, 10, 36)" size="28"></up-icon>
			</view>

			<view class="mar-top-80">
				<up-button type="primary" color="#ffc820" @click="jumpCardAddress" :customStyle="customStyle"
					:text="$t('my.add')"></up-button>
			</view>
		</view>

		<up-modal :show="delVisisbel" :title="$t('home.kind_reminder')" :content="$t('my.want_delete_current_wallet')"
			:cancelText="$t('my.cancel')" :confirmText="$t('confirm')" showCancelButton @cancel="delVisisbel = false"
			@confirm="handConfirm"></up-modal>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		useI18n
	} from 'vue-i18n';
	import {
		walletAll,
		walletDel
	} from '@/api/user'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const {
		t
	} = useI18n()
	const customStyle = {
		color: '#000000',
		borderRadius: '20rpx',
		boxShadow: '0 1.2077vw 10rvw rgba(75, 98, 157, .11)'
	}
	const delVisisbel = ref(false) // 删除钱包提示弹窗
	const walletId = ref("") // 钱包ID
	const content = ref(-1)
	const walletList = ref([])
	// 获取钱包列表
	const getWalletList = async () => {
		const res = await walletAll()
		walletList.value = res.data.lists
	}
	// 选择钱包
	const handChoiceCard = (index) => {
		if (index === content.value) return content.value = -1
		content.value = index
	}

	const jumpCardAddress = () => {
		uni.navigateTo({
			url: '/pages/my_actions/add-card-address/add-card-address'
		})
	}
	// 删除钱包
	const handWalletDel = async (item) => {
		delVisisbel.value = true;
		walletId.value = item.id
	}

	const handConfirm = async () => {
		const res = await walletDel({
			ids: [walletId.value]
		})
		delVisisbel.value = false;
		uni.$u.toast(t('my.delete_successful'));
		getWalletList();
	}

	onLoad(() => {
		getWalletList()
	})
</script>

<style lang="scss" scoped>
	:deep(.u-modal__content__text) {
		text-align: center;
	}

	.content {
		padding: 0 25rpx;
		padding-top: 30rpx;
		box-sizing: border-box;
	}

	.cardslist {
		display: flex;
		justify-content: space-between;
		width: 100%;
		min-height: 200rpx;
		background-color: #ffc820;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		padding: 20rpx 40rpx;
		box-sizing: border-box;

		.item-list {
			gap: 15rpx;
		}
	}

	.active {
		border: 4rpx solid #000000;
	}
</style>